<template>
  <div>
    <v-content-layout v-model:searchForm="searchForm" @search="search" @reset="getList">
      <template #searchFold>
        <v-search-item label="名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入菜单名称" />
        </v-search-item>
        <v-search-item label="路径">
          <a-input v-model:value="searchForm.path" placeholder="请输入应用路径" />
        </v-search-item>
      </template>
      <template #handleBtn>
        <a-button type="primary" @click="addApp">添加一级菜单</a-button>
      </template>
      <template v-slot:table="{ height }">
        <v-table :height="height" :pagination="false" :listData="listData" :columns="tableColumns">
          <template v-slot:operation="{ record }">
            <v-text-button @click="addSubMenu(record)">添加子菜单</v-text-button>
            <v-text-button v-if="!record.redirect" @click="addPageBtn(record)">添加关联按钮</v-text-button>
            <v-text-button @click="editMenu(record)">编辑</v-text-button>
            <v-text-button @click="deleteMenu(record)">删除</v-text-button>
          </template>
        </v-table>
      </template>
      <template #pagination>
        <v-pagination
          :total="total"
          v-model:current="searchForm.currentNum"
          v-model:pageSize="searchForm.pageSize"
          @change="getList"
          @showSizeChange="getList"
        ></v-pagination>
      </template>
    </v-content-layout>

    <!--  弹框组件  -->
    <add
      v-if="addVisible"
      v-model:visible="addVisible"
      :init-form="editForm"
      :model="model"
      @close="getList"
    ></add>

    <!--  关联按钮组件  -->
    <relate-btn
      v-if="relateVisible"
      v-model:visible="relateVisible"
      :init-form="editForm"
      :model="model"
    ></relate-btn>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'system-menuTree'
  }
</script>
<script lang="ts" setup>
import { tableColumns } from './config'
import { ref, reactive, onMounted } from 'vue'
import add from './add.vue'
import relateBtn from './relateBtn.vue'
import useCurrentInstance from 'lib-utils/vueInstance'

const { proxy } = useCurrentInstance()

let total = ref(0)
let addVisible = ref(false)
let relateVisible = ref(false)
let editForm = ref(null)
let model = ref('add')
const searchForm = reactive({
  currentNum: 1,
  pageSize: 10,
  name: '',
  path: ''
})
let listData = ref([])

onMounted(() => {
  getList()
})

const getList = () => {
  proxy.$http.get(proxy.$api.menu.listTree, searchForm).then(res => {
    listData.value = res
    total.value = res.length
  }).catch(() => {
  })
}

const search = () => {
  getList()
}

const reset = () => {

}

const addApp = () => {
  model.value = 'add'
  editForm.value = null
  addVisible.value = true
}

const addSubMenu = (record:any) => {
  model.value = 'add'
  editForm.value = record
  addVisible.value = true
}

const addPageBtn = (record:any) => {
  editForm.value = record
  relateVisible.value = true
}

const editMenu = (record:any) => {
  model.value = 'edit'
  editForm.value = record
  addVisible.value = true
}

let ids:any = []
const deleteMenu = (record:any) => {
  ids = []
  console.log(getMenuIds([record]))
  proxy.$vConfirm({
    content: '是否确认删除!'
  }).then(() => {
    proxy.$http.post(proxy.$api.menu.delete, {
      ids: getMenuIds([record])
    }).then(() => {
      getList()
    }).catch(() => { })
  }).catch(() => { })
}

const getMenuIds = (menus:any) => {
  for (let i = 0; i < menus.length; i++) {
    ids.push(menus[i].id)
    if (menus[i].children && menus[i].children.length) {
      getMenuIds(menus[i].children)
    }
  }
  return ids
}
</script>

<style lang="less" scoped>
</style>